<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- <style>
        input{
            display: block;
            width: 80px;
            height: 40px;
            background-color: greenyellow;
            color: black;
            border: 2px solid green;
            font-size: 24px;
            font-family: '微软雅黑';
            line-height: 30px;
            border-radius: 5px;
        }

    </style> -->
    <link rel="stylesheet" href="css/btn.css">
</head>
<body>

    <!-- 
        css的引入方式有3种
        1.第一种是通过元素的style属性进行修饰 key: value;key: value;... ...
        缺点是代码冗余复用性不强 且和html代码混杂在一起不利于观感
        2.第二种是通过head元素的style标签进行引入
        缺点是仅适用于本文件复用度不高
        3.外部css文件引用 link标签 推荐使用

     -->

     <!-- 
        3种css选择器
        1.元素选择器
        元素名{}
        缺点：作用范围太大不可以定制化
        2.id选择器
        #id{}
        缺点：只能作用于单个元素 会产生大量的代码
        3.class选择器 推荐使用
        .className{}

        作用优先级 id>class>元素
      -->

    <input type="button" id="btn1" class="colorClass" value="按钮"/>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
    
</body>
</html>